<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Recaf - modern bytecode editor</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta name="viewport" content="width=device-width">
		<meta name="description" content="Recaf is a modern java bytecode editor using Objectweb's ASM and JavaFX.">
		<meta name="keywords" content="java,bytecode,editor,recaf,reverse engineering">
		<link rel="icon" type="image/x-icon" href="favicon.ico"/>
		<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/code.css">
	</head>
	<body>
		<header>
			<div class="beam container-wide">
				<div class="box-left">
					<a href="index.html"><div class="logo"></div></a>
				</div>
				<div class="box-right">
					<nav>
						<a href="index.html">Home</a>
						<a href="documentation.html">Documentation</a>
						<a href="features.html">Features</a>
						<a href="https://github.com/Col-E/Recaf">Github</a>
					</nav>
				</div>
			</div>
		</header>
		<section id="content">
			<h1 id="tcs">Themes &amp; Custom Styles</h1>
			<img class="ci" src="screenshots/uisw-config-theme.png">
			<p>JavaFX allows components to be styled using CSS. The packaged themes can be selected on the options panel under Display. You will need to restart Recaf for the theme to apply to completely.</p>
			<p>Themes are located in the directory <span class="code">src\resources\style</span>. To create your own style, copy an existing theme's CSS and edit to your liking. Tags are sorted into groups and have some comments explaining choices made for the styles and where they are used in the UI.</p>
			<h1 id="refs">References</h1>
			<ul>
				<li><a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html">JavaFX: CSS reference</a></li>
				<li><a href="https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/apply-css.htm">JavaFX: Working with JavaFX UI Components</a></li>
				<li><a href="https://github.com/Col-E/Recaf/tree/master/src/main/resources/style">Recaf default CSS</a></li>
			</ul>
			<h1 id="examples">Examples</h1>
			<h3 id="t1">Flat theme</h1>
			<img class="ci" src="screenshots/css-recaf-flat.png">
			<h3 id="t2">Night theme</h1>
			<img class="ci" src="screenshots/css-recaf-night.png">
			<h3 id="t2">Default JavaFX theme</h1>
			<img class="ci" src="screenshots/css-default-fx.png">
		</section>
	</body>
</html>